<template>
  <a-modal :title="title" :width="width" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel" rowKey="id" size="middle">
    <a-spin :spinning="confirmLoading">
      <a-table :columns="columns" :data-source="dataSource" :pagination="false" :row-selection="rowSelection">
        <span slot="dataNameSlot" slot-scope="name, record">
          <a-input v-model="record.name" @input="e => handlerInput(record.index, 'name', e)"></a-input>
        </span>
        <span slot="lengthSlot" slot-scope="length, record">
          <a-input-number v-model="record.length" :min="0" style="width:60px"
                          @change="e => handlerInput(record.index, 'length', e)"></a-input-number>
        </span>
        <a-row slot="dataConverSlot" slot-scope="convert, record">
          <a-col :span="2">
            <a-switch v-model="record.isConvert" :disabled="!record.convert" @change="value => handlerInput(record.index, 'isConvert', value)"></a-switch>
          </a-col>
          <a-col v-if="record.isConvert && record.type==='dateformat'" :span="20">
            <a-input v-model="convert.dateformat" @input="e => handlerInput(record.index, 'convert.dateformat', e)">
              <a-tooltip slot="suffix" title="
              `%M 月名字(January……December)
%W 星期名字(Sunday……Saturday)
%D 有英语前缀的月份的日期(1st, 2nd, 3rd, 等等。）
%Y 年, 数字, 4 位
%y 年, 数字, 2 位
%a 缩写的星期名字(Sun……Sat)
%d 月份中的天数, 数字(00……31)
%e 月份中的天数, 数字(0……31)
%m 月, 数字(01……12)
%c 月, 数字(1……12)
%b 缩写的月份名字(Jan……Dec)
%j 一年中的天数(001……366)
%H 小时(00……23)
%k 小时(0……23)
%h 小时(01……12)
%I 小时(01……12)
%l 小时(1……12)
%i 分钟, 数字(00……59)
%r 时间,12 小时(hh:mm:ss [AP]M)
%T 时间,24 小时(hh:mm:ss)
%S 秒(00……59)
%s 秒(00……59)
%p AM或PM
%w 一个星期中的天数(0=Sunday ……6=Saturday ）
%U 星期(0……52), 这里星期天是星期的第一天
%u 星期(0……52), 这里星期一是星期的第一天
%% 一个文字“%`">
                <a-icon style="color: rgba(0,0,0,.45)" type="info-circle" />
              </a-tooltip>
            </a-input>
          </a-col>
          <a-col v-if="record.isConvert && 'database,enum'.indexOf(record.type) > -1" :span="20">
            <a-row>
              <a-col :span="8">
                <a-input v-model="convert.dictTable" @input="e => handlerInput(record.index, 'convert.dictTable', e)" />
              </a-col>
              <a-col :span="8">
                <a-input v-model="convert.dictKey" @input="e => handlerInput(record.index, 'convert.dictKey', e)" />
              </a-col>
              <a-col :span="8">
                <a-input v-model="convert.dictValue" @input="e => handlerInput(record.index, 'convert.dictValue', e)" />
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="2">
            <a-icon slot="suffix" type="align-right" @click="convertEditHandle(convert, record.index)" />
          </a-col>
        </a-row>
      </a-table>
      <convert-edit-modal ref="convertEditModal" @ok="convertEditModalOk"></convert-edit-modal>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { getAction, httpAction } from '@/api/manage'
import JCodeEditor from '@/components/jeecg/JCodeEditor.vue'
import ConvertEditModal from './ConvertEditModal.vue'

export default {
  name: 'DeviceInstanceData',
  components: { JCodeEditor, ConvertEditModal },
  data() {
    return {
      title: '设备实例数据',
      width: 1200,
      visible: false,
      confirmLoading: false,
      selectedRows: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'index'
        },
        {
          title: '数据key',
          dataIndex: 'key'
        },
        {
          title: '数据名称',
          dataIndex: 'name',
          scopedSlots: { customRender: 'dataNameSlot' }
        },
        {
          title: '显示长度',
          dataIndex: 'length',
          scopedSlots: { customRender: 'dataTypeSlot' }
        },
        {
          title: '数据转换',
          dataIndex: 'convert',
          scopedSlots: { customRender: 'dataConverSlot' }
        }
      ],
      dataSource: [
        {
          index: 0,
          key: 'name',
          name: '实例名称',
          type: 'string',
          length: 0,
          isConvert: false
        },
        {
          index: 1,
          key: 'code',
          name: '实例标识',
          type: 'string',
          length: 0,
          isConvert: false
        },
        {
          index: 2,
          key: 'parentBy',
          name: '上级实例',
          type: 'database',
          length: 0,
          convert: { dictTable: 'iot_device_instance', dictKey: 'id', dictValue: 'name' },
          isConvert: false
        },
        {
          index: 3,
          key: 'sceneBy',
          name: '所属场景',
          type: 'database',
          length: 0,
          convert: { dictTable: 'iot_scene', dictKey: 'id', dictValue: 'name' },
          isConvert: false
        },
        {
          index: 4,
          key: 'sceneSchemeBy',
          name: '场景方案',
          type: 'database',
          length: 0,
          convert: { dictTable: 'iot_scene_scheme', dictKey: 'id', dictValue: 'name' },
          isConvert: false
        },
        {
          index: 5,
          key: 'status',
          name: '实例状态',
          type: 'enum',
          length: 0,
          convert: { dictTable: 'com.zhouwr.common.enums.DeviceInstanceState', dictKey: 'value', dictValue: 'text' },
          isConvert: false
        },
        {
          index: 7,
          key: 'createBy',
          name: '创建人',
          type: 'database',
          length: 0,
          convert: { dictTable: 'sys_user', dictKey: 'username', dictValue: 'realname' },
          isConvert: false
        },

        {
          index: 8,
          key: 'createTime',
          name: '创建日期',
          type: 'dateformat',
          length: 0,
          convert: { dateformat: '%Y-%c-%d %H:%i:%s' },
          isConvert: false
        },
        {
          index: 9,
          key: 'updateBy',
          name: '更新人',
          type: 'database',
          length: 0,
          convert: { dictTable: 'sys_user', dictKey: 'username', dictValue: 'realname' },
          isConvert: false
        },
        {
          index: 10,
          key: 'updateTime',
          name: '更新日期',
          type: 'dateformat',
          length: 0,
          convert: { dateformat: '%Y-%c-%d %H:%i:%s' },
          isConvert: false
        },
        {
          index: 11,
          key: 'description',
          name: '描述',
          type: 'string',
          length: 0,
          isConvert: false
        }
      ],
      url: {
        list: ''
      }
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRows = JSON.parse(JSON.stringify(selectedRows)).map(row => {
            return row
          })
          console.log('selectedRows: ', this.selectedRows)
        },
        getCheckboxProps: record => ({
          props: {}
        })
      }
    }
  },
  watch: {},
  methods: {
    handlerInput(index, item, $event) {
      for (let i in this.selectedRows) {
        console.log($event instanceof Object)
        let value = $event instanceof Object ? $event.target.value : $event
        if (this.selectedRows[i].index === index) {
          if (item.indexOf('.') !== -1) {
            this.selectedRows[i][item.split('.')[0]][item.split('.')[1]] = value
          } else {
            this.selectedRows[i][item] = value
          }
          console.log(JSON.stringify(this.selectedRows[i].convert))
        }
      }
    },
    convertEditModalOk(index, convert) {
      console.log(index, convert)
      this.$nextTick(function() {
        this.dataSource[index].convert = convert
      })
    },
    convertEditHandle(value, index) {
      console.log(value, index)
      this.$refs.convertEditModal.setEditer(index, value)
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      this.$emit(
        'ok',
        this.selectedRows.map(row => {
          row['source'] = 'instance'
          delete row.isConvert
          // dateformat 拿到外层
          if(row.convert) {
            row['dateformat'] = row.convert.dateformat
            delete row.convert.dateformat
          }
          return row
        })
      )
      this.visible = false
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style lang="less" scope></style>
